<!--
 * @Author: luo jp luojp@novots.com
 * @Date: 2022-10-11 18:53:42
 * @LastEditors: luo jp luojp@novots.com
 * @LastEditTime: 2022-10-11 18:59:49
 * @FilePath: \vue2-element-admin\src\views\login.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 登录页面 -->
<template>
  <div class="login_bg flex_row_center_center">
    <el-form ref="ruleForm" :model="form" :rules="rules" label-width="70px" class="login_form">
      <h1 class="login_title">海底捞后台管理系统</h1>
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username" style="width:100%"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="form.password" type="password"></el-input>
      </el-form-item>
      <el-button @click="handleLogin('ruleForm')" type="primary">登录</el-button>
    </el-form>
  </div>
</template>
<script>
import { login } from '@/request/api';
import axios from 'axios';
export default {
  name: 'Login',
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 9, message: '长度在 3 到 9 个字符', trigger: 'blur' }
        ]
      },
      menuList: [],
    }
  },
  methods: {
    //获取菜单数据,存入vuex,模拟接口
    async handleMenuList() {
      //菜单数据应该为接口数据
      // userList().then(res=>{console.log('res----',res);});  //本地mock数据的结果演示(使用mock服务);
      // this.menuList = [{
      //   index: '1',
      //   title: '系统管理',
      //   icon: 'el-icon-house',
      //   path: '/home/systemManage',
      //   children: [
      //     {
      //       index: '12',
      //       title: '用户管理',
      //       icon: '',
      //       path: '/home/systemManage/user',
      //     }, {
      //       index: '13',
      //       title: '角色管理',
      //       icon: '',
      //       path: '/home/systemManage/role',
      //     }, {
      //       index: '14',
      //       title: '菜单管理',
      //       icon: '',
      //       path: '/home/systemManage/menu',
      //       children:[
      //         {
      //           index:'141',
      //           title:'路由菜单',
      //           icon:'',
      //           path:'/home/systemManage/menu/routeMenu'
      //         }
      //       ]
      //     }
      //   ]
      // }, {
      //   index: '2',
      //   title: '设置管理',
      //   icon: 'el-icon-s-tools',
      //   path: '/home/settingManage',
      // }, {
      //   index: '3',
      //   title: '表格管理',
      //   icon: 'el-icon-setting',
      //   path: '/home/tableManage',
      //   children: [
      //     {
      //       index: '31',
      //       title: '基础表格',
      //       icon: '',
      //       path: '/home/tableManage/basicTable',
      //     }, {
      //       index: '32',
      //       title: '进阶表格',
      //       icon: '',
      //       path: '/home/tableManage/advancedTable',
      //     },{
      //       index:'33',
      //       title:'合并表格',
      //       icon:'',
      //       path:'/home/tableManage/merageTable'
      //     }
      //   ]
      // }, {
      //   index: '4',
      //   title: '表单管理',
      //   icon: 'el-icon-receiving',
      //   path: '/home/formManage',
      // }];


      //引用本地mock的menu的数据(使用本地数据)
      let result = await axios.get('/user/menuList');
      if(result.status === 200){
        this.menuList = res.data.data;
        this.$store.dispatch('setMenuList', this.menuList);
        this.$router.push('/home');
      }
    },
    handleLogin(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          const { username, password } = this.form;
          let params = {
            username,
            password
          }
          this.login();
        } else {
          console.log('error submit');
          return false;
        }
      })
    },
    login() {
      // login(params).then(res=>{
        this.$message({
          type: 'success',
          message: '登录成功'
        });
        // 存储个人信息到vuex
        this.$store.dispatch('setUserInfo', this.form);
        this.handleMenuList();
      // })
    }
  }
}
</script>
<style lang="scss" scoped>
.login_bg {
  width: $percent_100;
  height: $height_100vh;
  background-image: url('@/assets/images/bg4.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;

  .login_form {
    width: 400px;
    background: rgba($color: #FFFFFF, $alpha: 0.4);
    margin: auto;
    padding: 20px 40px 50px 30px;
    box-sizing: border-box;
    border-radius: 10px;

    .login_title {
      margin-bottom: 30px;
      font-size: 20px;
      font-weight: bold;
    }
  }
}
</style>